<template>
  <div class="comSelect-container">
    <tree-select
      :options="treeData"
      v-model="innerValue"
      :placeholder="placeholder"
      :clearable="clearable"
      :filterable="filterable"
      :disabled="disabled"
      v-on="$listeners"
      :multiple="multiple"
    >
    </tree-select>
  </div>
</template>

<script>
export default {
  name: "rolSelect",
  props: [
    "value",
    "disabled",
    "placeholder",
    "multiple",
    "clearable",
    "filterable",
  ],
  model: {
    prop: "value",
    event: "input",
  },
  data() {
    return {
      treeData: [],
      innerValue: this.value,
    };
  },
  methods: {
    async getData() {
      this.treeData = await this.$store.dispatch("base/getRoleList");
      this.treeData.forEach((el) => {
        el.disabled = false;
      });
      console.log("treeData", this.treeData);
    },
  },
  created() {
    this.getData();
  },
  watch: {
    innerValue(val) {
      // val && this.$emit('change', val)
    },
    value(val) {
      this.innerValue = val;
    },
  },
};
</script>
<style lang="scss">
.comSelect-container {
  .el-select {
    width: 100%;
  }
}
</style>
